<template>
  <div class="search-box">
    <input type="text" class="search" placeholder="请输入内容"
           v-model="value" @keyup.enter="handleClick('baidu')" />
    <div class="action">
      <i class="iconfont"
         v-for="(item, index) in searchIcon" :key="index"
         :class="item.icon" :title="item.title"
         @click="handleClick(item.type)"></i>
    </div>
  </div>
</template>

<script setup>
import { searchIcon } from 'configs/localData.js'
import { ref } from 'vue'

const value = ref('')

const handleClick = (type) => {
  if (type === 'baidu') {
    window.open(`https://www.baidu.com/s?ie=utf-8&word=${value.value}`);
  } else if (type === 'translate') {
    window.open(`https://fanyi.baidu.com/translate?aldtype=16047&query=${value.value}&keyfrom=baidu&smartresult=dict&lang=auto2zh`);
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .search {
    width: 50%;
    outline: none;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    font-size: 28px;
    text-align: center;
    background-color: transparent;
    &::-webkit-input-placeholder {
      color: #585c89;
    }
  }
  .action {
    margin-left: 64px;
    i {
      cursor: pointer;
      margin: 0 10px;
      color: dodgerblue;
    }
  }
}
</style>
